<template>
	<view>
		<view class="headerbox">
			<view class="selectnum">已有{{list.length}}件宝贝</view>
			<view class="editbox" v-if="orindex" @click="handor()">编辑商品</view>
			<view class="editbox" v-else  @click="handor()">取消</view>
		</view>
		<view style="height: 124rpx;"></view>
		<!-- 购物车列表 -->
		<view class="listbox" v-for="(item,index) in list" :key="index">
			<view class="imgbox">
				<image v-if="!item.select" @click="changeSelect(index)" src="../../static/yuan.png"></image>
				<image v-else  @click="changeSelect(index)" src="../../static/gou.png"></image>
			</view>
			<view class="goodsimg">
				<image :src="item.goods_images[0].full_url"></image>
			</view>
			<view class="goodsinfo">
				<view class="namebox">{{item.goods_name}}</view>
				<view class="specbox">
					<text v-if="item.specname"  v-for="(s,sindex) in item.specname[0].goods_props" :key="sindex">
						{{s.group.name}}:{{s.value.name}}
					</text>
				</view>
				<view class="pricebox">
					<view class="redbox"><text>￥</text>{{item.info.unit_price}}</view>
					<view class="actbox">
						<image @click="reduce(item)" src="../../static/jian.png"></image>
						<view class="numbox">{{item.carnum}}</view>
						<image @click="add(item)" src="../../static/add.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view style="height: 120rpx;"></view>
		<view class="navbut">
			<view class="allselect" @click="selectall()">
				<image v-if="!allindex" src="../../static/yuan.png"></image>
				<image v-else src="../../static/gou.png"></image>
				<view>全选</view>
			</view>
			<!-- 结算 -->
			<view class="settlement" v-if="orindex">
				<view class="pricebox"><text>合计:</text> <text style="color: #FE5326;">￥</text>{{totalPrice}}</view>
				<view class="toorder" @click="sumbitorder()">去结算({{totalNum}})</view>
			</view>
			<!-- 删除 -->
			<view class="settlement" v-else >
				<view class="delbox" @click="editdel">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orindex:true,//切换编辑或完成
				list: uni.getStorageSync('carlist')||[],
				selectlist:[],//选择完的数据
				token:uni.getStorageSync('token')
			};
		},
		onTabItemTap(){
			console.log("点击")
		},
		computed: {
			// 计算选中商品数量
			totalNum() {
				let totalNum = 0;
				this.list.map(item => {
					totalNum += item.select?(+item.carnum):0
				})
				return totalNum
			},
			//计算选中商品的总价
			totalPrice() {
				let totalPrice = 0;
				this.list.map(item => {
					 if(item.select){
						 totalPrice += item.carnum * item.info.unit_price 
					 }
				})
				// return totalPrice
				return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
			},
			allindex(){
				return this.list.length == this.list.filter(item=>item.select).length
			}
		},
		onShow() {
			if(!this.token){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			}
			// goods_type 1供应商 2商家
			this.list = uni.getStorageSync('carlist')
			this.list = uni.getStorageSync('carlist').filter(item=>item.goods_type==1)
			this.list.map(item => {
				if(item.spec_type==20&&!item.specname){
					item.specname = item.skuList.filter(sitem=>sitem.goods_sku_id==item.info.spec_id)
					item.specname[0].goods_props = JSON.parse(item.specname[0].goods_props)
					console.log(item.specname[0].goods_props)
				}
				item.select = false
			})
			console.log(this.list)
		},
		methods:{
			changeSelect(index){
				this.list[index].select = !this.list[index].select
				this.list = [...[],...this.list]
			},
			//全选
			selectall(){
				let allindex = !JSON.parse(JSON.stringify(this.allindex))
				this.list.forEach((item)=>{
					item.select=allindex
				})
				this.list = [...[],...this.list]
			},
			//减商品数量
			reduce(item){
				if(item.carnum==1){
					uni.showToast({
						title:'数量不能减少了',
						icon:'none'
					})
				}else{
					item.carnum--
				}
				uni.setStorageSync('carlist',this.list)
			},
			//加商品数量
			add(item){
				item.carnum++
				uni.setStorageSync('carlist',this.list)
			},
			//切换编辑取消
			handor(){
				this.orindex = !this.orindex
			},
			//删除购物车
			editdel(){
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success:  (res)=> {
						if (res.confirm) {
							this.list = this.list.filter((item)=>{
								return !item.select
							})
							uni.setStorageSync('carlist',this.list)
						} 
					}
				});
			},
			//提交订单
			sumbitorder(){
				if(this.totalNum==0){
					uni.showToast({
						title:'请选择要结算的商品',
						icon:'none'
					})
					return
				}
				const tlist = this.list.filter((item)=>{
					return item.select
				})
				uni.navigateTo({
					url:'/pageshop/submitorder/submitorder?list='+encodeURIComponent(JSON.stringify(tlist))+'&is_car='+1
				})
				// const slist = this.list.filter((item)=>{
				// 	return !item.select
				// })
				// uni.setStorageSync('carlist',slist)
			},
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss">
	.headerbox{
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 14rpx 14rpx;
		position: fixed;
		top:0;
		display:flex;
		align-items: center;
		justify-content: space-between;
		.selectnum{
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		.editbox{
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #F94D29;
			margin-right: 30rpx;
		}
	}
	.listbox{
		display: flex;
		align-items: center;
		width: 690rpx;
		background-color: #FFF;
		padding: 30rpx;
		margin-bottom: 24rpx;
		.imgbox{
			width: 10%;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
			}
		}
		.goodsimg{
			width: 33%;
			image{
				width: 210rpx;
				height: 210rpx;
				background: #999999;
				border-radius: 6rpx ;
			}
		}
		.goodsinfo{
			width: 57%;
			.namebox{
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.specbox{
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				margin: 24rpx 0 40rpx 0;
				>text{
					margin-right: 5rpx;
				}
			}
			.pricebox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.redbox{
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FE5326;
					>text{
						font-size: 28rpx;
					}
				}
				.actbox{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
					}
					.numbox{
						min-width: 80rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						text-align: center;
					}
				}
			}
		}
	}
	.navbut{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFF;
		.allselect{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			margin-left: 30rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
		.settlement{
			display: flex;
			align-items: center;
			.pricebox{
				font-size: 38rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FE5326;
				>text{
					font-size: 28rpx;
				}
			}
			.toorder{
				width: fit-content;
				padding: 0 46rpx;
				height: 84rpx;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				border-radius: 83rpx;
				line-height: 84rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				margin:0 30rpx 0 26rpx;
			}
			.delbox{
				width: 224rpx;
				height: 80rpx;
				border-radius: 83rpx;
				border: 2rpx solid #999999;
				text-align: center;
				line-height: 84rpx;
				margin:0 30rpx 0 26rpx;
			}
		}
	}

</style>
